<template>
  <s-layout
    title="社群"
    color="#333"
    navbar="inner1"
    :bgStyle="{
      color: '#fff',
    }"
    :onShareAppMessage="state.shareData"
  >
    <view v-if="isAuditMode==true">开发中敬请期待！！！</view>
    <view v-if="isAuditMode==false">
      <assNavbar
        title="话题"
        :background="{ BGcolor: '#fff', img: 'none' }"
      ></assNavbar>
      <su-swiper
        imageMode="aspectFit"
        :isPreview="true"
        :list="state.swiperList"
      ></su-swiper>
      <view class="article">
        <view class="article-title">
          {{ state.talkData.title }}
        </view>
        <view class="article-sub-title">
          {{ state.talkData.sub_title }}
        </view>
        <view
          class="article-content"
          v-html="state.talkData?.content"
        > </view>
        <view class="hotspot ss-flex ss-row-between">
          <view class="ss-flex title">{{state.sort == 'likes'?'热度':'最新'}}<view>查看</view>
          </view>
          <view
            class="ss-flex set"
            @click="setComment"
          >
            <view :style="{ backgroundColor: state.sort == 'likes' ? theme.btn_background_color : '' }">热度</view>
            <view class="line"></view>
            <view :style="{
                backgroundColor: state.sort == 'createtime' ? theme.btn_background_color : '',
              }">最新</view>
          </view>
        </view>
        <view
          v-if="state.talkData?.comment.length"
          class="article-comment"
        >
          <assComment
            v-for="commentData in state.talkData?.comment"
            :key="commentData.updatatime"
            @del="commentDel"
            @like="commentLike"
            :contnet="commentData"
            @comment="comment(commentData)"
          >
            <!-- <assComment child v-for="childData in commentData.child" :key="childData.updatatime" @del="commentDel"  @like="commentLike"
						:contnet="childData" @comment="comment({...childData,fa_comment_id:commentData.comment_id})"></assComment> -->

            <assComment
              child
              v-for="childData in isFold(commentData.comment_id)
                ? commentData.child
                : commentData.child.slice(0, 1)"
              :key="childData.updatatime"
              @del="commentDel"
              @like="commentLike"
              :contnet="childData"
              @comment="comment({ ...childData, fa_comment_id: commentData.comment_id })"
            ></assComment>
            <view
              v-if="!isFold(commentData.comment_id) && commentData.child.length > 1"
              class="childShow"
              :style="{ color: theme.collapse_color }"
              @click="state.commentFold.push(commentData.comment_id)"
            >
              展开{{ commentData.child.length - 1 }}条回复
            </view>
          </assComment>
        </view>
        <view
          v-else
          style="color: #999"
        >暂无评论</view>
      </view>
      <assReply
        :placeholder="state.placeholder"
        :focus="state.focus"
        @reply="topicComment"
        @cancel="state.focus = false"
      ></assReply>
      <assTalkTab
        :articleData="state.talkData"
        @comment="comment"
        @likeSet="topicLike"
        @shareFun="shareFun"
      ></assTalkTab>
      <!-- 分享列表为空注释 -->
      <!-- <popupShare
        v-model:show="state.showShare"
        :findId="state.id"
      ></popupShare> -->
    </view>
  </s-layout>
</template>

<script setup>
import assNavbar from '@/components/ass-navbar.vue';
import assComment from './components/ass-comment.vue';
import assTalkTab from './components/ass-talk-tab.vue';
import assReply from './components/ass-reply.vue';
import sheep from '@/sheep';
import API from '../api';
import association from '@/association/store';
import popupShare from "./components/popup-share.vue";
import appApi from '@/sheep/api/app';

import {
  onLoad,
  onShow,
  onPageScroll,
  onPullDownRefresh,
  onShareAppMessage,
  onShareTimeline,
} from '@dcloudio/uni-app';
import { onMounted, nextTick, computed, reactive } from 'vue';

const isAuditMode = computed(() => sheep.$store('app').isAuditMode);

const state = reactive({
  shareData: {
    title: '话题',
    path: '/association/pages/talk',
    image: '',
    desc: '',
  },
  // 评论折叠控制
  commentFold: [],
  // 评论排序
  sort: 'likes',
  focus: false,
  id: '',
  placeholder: '',
  tabsIndex: 0,
  comment_id: 0,
  to_user_id: 0,
  isLike: false,
  talkData: {
    comment: [],
  },
  reply: '',
  swiperList: [],
  showShare: false
});
onShareAppMessage((e) => {
  topicForward();
});
onShareTimeline((e) => {
  topicForward();
  return {
    ...state.shareData,
    imageUrl: state.shareData.image,
  };
});
const isFold = (id) => {
  return state.commentFold.includes(id);
};
const theme = computed(() => association().theme);
const shareFun = () => {
  console.log('点击回调');

  state.showShare = true;
};
const topicForward = async (e) => {
  let res = await API.topicForward({
    topic_id: state.id,
  });
  if (res.code) {
    // uni.showToast({
    // 	icon:'none',
    // 	title:'评论成功',
    // 	duration:1000
    // })
    state.talkData.forward += 1;
  }
};
const comment = (data) => {
  state.focus = false;
  if (data) {
    state.comment_id = data.fa_comment_id != undefined ? data.fa_comment_id : data.comment_id;
    state.to_user_id = data.user_id;
  } else {
    state.comment_id = 0;
    state.to_user_id = 0;
  }
  nextTick(() => {
    state.focus = true;
    state.placeholder = data ? '回复：' + data.nickName : '评论';
  });
};
const topicLike = async () => {
  // 弹出分享弹窗

  // let res = await API.topicLike({
  //   topic_id: state.id,
  // });
  // if (res.code) {
  //   state.talkData.is_likes = !!res.data.is_like;
  //   if (res.data.is_like) {
  //     state.talkData.likes += 1;
  //   } else {
  //     state.talkData.likes -= 1;
  //   }
  // }
};
const topicComment = async (e) => {
  let data = {
    topic_id: state.id,
    content: e.content,
    comment_id: state.comment_id,
    to_user_id: state.to_user_id,
  };
  let res = await API.topicComment(data);
  if (res.code) {
    if (!isFold(state.comment_id)) {
      state.commentFold.push(state.comment_id);
    }
    uni.showToast({
      icon: 'none',
      title: '评论成功',
      duration: 1000,
    });
    getTalkDetails();
  }
};

const setComment = () => {
  state.sort = state.sort == 'likes' ? 'createtime' : 'likes';
  getTalkDetails();
};

const login = async () => {
  let res = await API.login();
};
onMounted(() => {
  // login()
});
const commentDel = (e) => {
  uni.showModal({
    title: '提示',
    content: '删除后无法恢复',
    success: async (res) => {
      if (res.confirm) {
        let res = await API.topicDelComment({
          comment_id: e.comment_id,
        });
        if (res.code) {
          uni.showToast({
            icon: 'none',
            title: '删除成功',
            duration: 1000,
          });
          getTalkDetails();
        }
      } else if (res.cancel) {
        // uni.showToast({
        // 	icon:'none',
        // 	title:'取消删除',
        // 	duration:1000
        // })
      }
    },
  });
};
const commentLike = async (e) => {
  let res = await API.topicLike({
    comment_id: e.comment_id,
  });
  if (res.code) {
    getTalkDetails();
  }
};
const getTalkDetails = async () => {
  let res = await API.topicDetails({
    topic_id: state.id,
    sort: state.sort,
  });
  state.talkData = res.data;
  state.swiperList = res.data.images.map((src) => {
    return {
      url: '',
      type: 'image',
      src,
    };
  });
  state.shareData = {
    title: state.talkData.title,
    path: `/association/pages/talk?id=${state.id}`,
    image: state.swiperList[0].src,
    desc: state.talkData.sub_title,
  };
};
onLoad(async (e) => {
  state.id = e.id;
  getTalkDetails();
});
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.hotspot {
  margin-bottom: 25rpx;

  .title {
    color: #ff6c18;
    font-size: 30rpx;

    & > view {
      font-size: 28rpx;
      color: #3d3d3d;
    }
  }

  .set {
    .line {
      padding: 0px !important;
      width: 3rpx;
      height: 40rpx;
      background-color: #f6f6f6;
    }

    .active {
      background-color: #b5f8ff;
    }

    & > view {
      height: 40rpx;
      padding: 10rpx;
      font-size: 18rpx;
      color: #3d3d3d;
    }
  }
}

.childShow {
  padding-left: 20rpx;
  font-size: 24rpx;
  margin-bottom: 15rpx;
  color: #1bbdce;
}

.article {
  & > view {
    margin: 20rpx;
  }

  .article-title {
    margin-top: 40rpx;
    color: #3d3d3d;
    font-size: 32rpx;
    font-weight: 600;
  }

  .article-sub-title {
    color: #555;
    font-size: 28rpx;
  }

  .article-content {
    color: #3d3d3d;
    font-size: 24rpx;
  }

  .article-comment {
    margin-top: 40rpx;
  }
}

.talkList-item {
  margin: 20rpx 20rpx 0;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;

  & > image {
    height: 176rpx;
    width: 176rpx;
    min-width: 176rpx;
    margin-right: 25rpx;
  }

  .talk-info {
    position: relative;
    height: 176rpx;
    max-height: 176rpx;
    color: #3d3d3d;

    .talk-icon {
      position: absolute;
      top: 0;
      right: 0;
    }

    .talk-title {
      font-size: 32rpx;
    }

    .talk-bottom {
      color: #666;
      font-size: 24rpx;

      & > view {
        width: 100rpx;
        height: 40rpx;
        font-size: 20rpx;
        border-radius: 20rpx;
        color: #1bbdce;
        line-height: 40rpx;
        text-align: center;
        background: #b5f8ff;
      }
    }

    .talk-data {
      color: #666;
      font-size: 24rpx;

      & > view {
        width: 33%;

        & > view {
          display: inline-block;
          color: #0ad5ea;
        }
      }
    }
  }
}
</style>